<template>
  <div>
    <el-menu
      :default-active="$route.path"
      router
      text-color="#222"
      active-text-color="red"
      class="space-menu"
      mode="vertical">
      <el-menu-item
        v-for="route in routes"
        :key="route.path"
        :index="route.path"
        :class="$route.path===route.path?'is-active':''">
        <i v-bind:class="route.icon"></i>
        {{route.navItem}}
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "SideMenu",
  data(){
    return{
      routes:[
        {path:'/labor/data',navItem:'实验室数据',icon:'el-icon-pie-chart'},
        {path:'/labor/list',navItem: '实验室成员',icon:'el-icon-user'}
      ]
    }
  },
  //添加元素滚动的监听事件

  methods:{

  }
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: inherit;
}

div, span {
  caret-color: transparent;
}

.space-menu{
  width: 170px;
  position: fixed;
}
</style>
